<template>
  <div class="container">
    <UnifyTitle :titlevalue="titleValue"/>
    <second-menu @titleValue="getTitleValue"></second-menu>
    <base-header ref="baseheader" @searchList="searchList" :newsType="newsType" @getChildren="getChildren" @onSearchh="onSearchh" @onSearch="onSearch" :tabs-name="tabsName" ></base-header>

    <Card dis-hover>
      <div
        class="flex bgFFF space-between color000 pl20 pr20 pt16 btn-section"
        style="position: relative; z-index: 10"
      >
        <div class="flex flex-y-center">
          <!-- <button-menu @handleAdd="handleAdd()" @batchDelete="batchDelete"></button-menu> -->
          <template>
            <el-button type="primary" class="button" @click="handleAdd" @batchDelete="batchDelete">新增新闻</el-button>
          </template>
        </div>
      </div>
    </Card>

    <!-- 列表区 -->
    <!-- <BaseTable
      ref="table"
      :loading="tableLoading"
      v-model="criteria"
      :columns="columns"
      :data="tableData"
      :selection="true"
      @on-search="loadData"
      @selectionChange="selectionChange"
    >
    </BaseTable> -->


    <!-- <el-table
          :data="
            data.filter(
              (data) =>
                !search ||
                data.userName.toLowerCase().includes(search.toLowerCase())
            )
          "
          style="width: 100%"
        >
          <el-table-column
            label="标题"
            prop="name"
          > </el-table-column>
          <el-table-column
            label="描述"
            prop="deptName"
          >
            <template slot-scope="scope">
              {{ scope.row.deptName }}
            </template>
          </el-table-column>
          <el-table-column
            label="	ID"
            prop="parentId"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            label="	UUID"
            prop="parentId"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column align="right">
            <template
              slot="header"
              slot-scope="scope"
            >
              <el-input
                v-model="search"
                size="mini"
                placeholder="输入关键字搜索"
              />
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
          >
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="rolesEdit(scope.$index, scope.row)"
              >角色管理</el-button>
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
              >区域管理</el-button>
            </template>
          </el-table-column>
        </el-table> -->
        
        <el-table
    ref="multipleTable"
    :data="tableData"
    tooltip-effect="dark"
    style="width: 100%">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      label="标题"
      width="120">
      <template slot-scope="scope">{{ scope.row.newsTitle }}</template>
    </el-table-column>
    <el-table-column
      prop="newsDesc"
      label="描述"
      width="120">
    </el-table-column>
    <el-table-column
      prop="newsType"
      label="id"
      show-overflow-tooltip>
    </el-table-column>
    <el-table-column
      prop="newsUuid"
      label="UUID"
      show-overflow-tooltip>
    </el-table-column>
    <el-table-column
            fixed="right"
            label="操作"
          >
            <template slot-scope="{row}">
              <el-button
                size="mini"
                @click="looklook(row)"
                v-access="'CHAKAN'"
              >查看</el-button>
              <el-button
                size="mini"
                @click="compile(row, 1)"
                v-access="'BIANJI'"
              >编辑</el-button>
              <el-button
                size="mini"
                type="danger"
                v-access="'SHANCHU'"
              >删除</el-button>
            </template>
          </el-table-column>
  </el-table>
  <div class="block">
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="100"
      layout="->, total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>


    <!-- 删除公共组件弹框 -->
    <Delete
      ref="delt"
      title="删除"
      :content="'删除后将无法恢复，确定删除？'"
      :isVisble="false"
      :delModal="true"
      :delLoading="delLoading"
      @modalConfirmTrue="modalConfirmTrue"
    />
    <Delete
      ref="batchDelt"
      title="删除"
      :content="'删除后将无法恢复，确定删除？'"
      :isVisble="false"
      :delModal="true"
      :delLoading="delLoading"
      @modalConfirmTrue="batchModalConfirmTrue"
    />
  </div>
</template>

<script>
import BaseModal from "_c/base-modal"
import BaseHeader from "./components/base-header"
import BaseDrawers from "_c/base-drawers/base-drawers";
import labelInfo from "_c/labelInfo/labelInfo";
import Detail from "./components/detail";

import secondMenu from "_c/main/menu/secondMenu";
import { JournalismList } from '@/api/data.js'

export default {
  components: {
    BaseModal,
    BaseHeader,
    BaseDrawers,
    labelInfo,
    Detail,
    secondMenu
  },
  data() {
    return {
      titleValue: '',
      tabsName: "",
      tableLoading: false,
      tableData: [], // 列表绑定数据
      /**
       * 查询条件
       */
       page: {
          page: 1,
          pageSize: 5,
        },
      criteria: {
        total: 0,
        page: {
          page: 1,
          pageSize: 10,
        },
      },
      /**
       * 表格字段
       */
      columns: [],
      columns1: [
        {
          fixed: "left",
          title: "政策标题",
          key: "policyTitle",
          minWidth: 400,
          align: "left",
          ellipsis: true,
          tooltip: true,
          tooltipTheme: "light",
        },
        {
          title: "添加人",
          key: "addUserName",
          align: "left",
          width: 170,
          ellipsis: true,
          tooltip: true,
          tooltipTheme: "light",
        },
        {
          title: "添加时间",
          key: "createDate",
          align: "left",
          minWidth: 180,
          ellipsis: true,
          tooltip: true,
          tooltipTheme: "light",
          render: (h, params) => {
            return h(
              "span",
              {style: {textAlign: "left"}},
              this.parseTime(params.row.createDate, "{y}-{m}-{d}")
            );
          },
        },
        {
          title: "置顶",
          key: "isTop",
          align: "left",
          minWidth: 180,
          ellipsis: true,
          tooltip: true,
          tooltipTheme: "light",
          render: (h, params) => {
            // return h(
            //   "span",
            //   {style: {textAlign: "left"}},
            //   params.row.isTop == 1 ? "是" : "否"
            // );
            return h('div', [
                h('i-switch', {
                  props: {
                    value:params.row.isTop == 1 ? true : false,
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    'on-change': (value) => {//触发事件是on-change,用双引号括起来，
                      //参数value是回调值，并没有使用到
                      // this.switch(params.index) //params.index是拿到table的行序列，可以取到对应的表格值
                      this.tableLoading = true;
                      this.APIS.istop({id: params.row.id}).then((res) => {
                        if (res.code == 20000) {
                          this.$Message.success("修改成功");
                          this.criteria.page.current = 1
                          this.tableData = []
                          this.loadData();
                        } else {
                          this.$Message.error(res.message)
                        }
                      });
                    }
                  }
                }, ),
              ]);
          },
          flag: true
        },
      ],
      columns2: [
        {
          fixed: "left",
          title: "标题",
          key: "policyTitle",
          minWidth: 400,
          align: "left",
          ellipsis: true,
          tooltip: true,
          tooltipTheme: "light",
        },
        {
          title: "描述",
          key: "policyContent",
          minWidth: 400,
          align: "left",
          ellipsis: true,
          tooltip: true,
          tooltipTheme: "light",
        },
        {
          title: "ID",
          key: "addUserName",
          align: "left",
          width: 170,
          ellipsis: true,
          tooltip: true,
          tooltipTheme: "light",
        },
        {
          title: "UUID",
          key: "createDate",
          align: "left",
          minWidth: 180,
          ellipsis: true,
          tooltip: true,
          tooltipTheme: "light",
          render: (h, params) => {
            return h(
              "span",
              {style: {textAlign: "left"}},
              this.parseTime(params.row.createDate, "{y}-{m}-{d}")
            );
          },
        },
      ],
      batchSelectionData: [],
      delLoading: false,  // 删除按钮loading
      keywords: null,
      newsType: ''
    };
  },
  computed: {},
  watch: {
    $route(val) {
      this.tabsName = this.$route.query.tabsName;
      this.batchSelectionData = [];
      this.criteria.page.current = 1
      this.criteria.keywords = ''
      this.criteria.endDate = ''
      this.criteria.startDate = ''
      this.$refs.baseheader.qingk();
      this.loadData();
    }
  },
  created() {
    this.getChildren()
    this.getJournalismList()
    this.tabsName = this.$route.query.tabsName;
    this.loadData();
  },
  methods: {
    // 分页器条数发生改变触发的事件
    handleSizeChange(e) {
      console.log('分页器条数发生改变触发的事件', e);
      this.page.pageSize = e
      this.getJournalismList()
    },
    // 分页器页数发生改变触发的事件
    handleCurrentChange(e) {
      console.log('分页器页数发生改变触发的事件', e);
      this.page.page = e
      this.getJournalismList()
    },
    // 编辑功能实现
    compile(row, number) {
      this.titleValue = '编辑新闻'
      this.$router.push({
        name: 'policyAdd',
        query: {
          id: row.id,
          // tabsName: this.tabsName
          number
        }
      })
    },
    // 从子组件那获取来的搜索之后的列表
    searchList(value) {
      this.tableData = value.records
    },
    // "newsType":1 --新闻类型   1-公示公告 2-政策 3-工作状态 4-风采展示
    // 获取列表
    async getJournalismList(v) {
      const res = await JournalismList({
        page: {
          page: this.page.page,
          pageSize: this.page.pageSize
        },
        keywords: this.flag === true ? this.keywords : null,
        newsType: v ? v : 1
      })
      console.log('获取的列表', res);
      this.tableData = res.records
      this.total = res.total
    },
    // 跳转到查看详情页面
    looklook(row) {
      console.log('详情', row);
      this.$router.push({
        name: 'policyDetail',
        query: {
          id: row.id
        }
      })
    },
    // 获取子组件传递出来的数据
    getChildren(val) {
      console.log('获取子组件传递出来的数据', val);
      this.keywords = val
    },
    getTitleValue(val) {
      console.log(val);
      const v = {
        '公示公告': 1,
        '政策查看': 2,
        '工作动态': 3,
        '人物风采': 4
      }
      this.getJournalismList(v[val])
      this.newsType = v[val]
    },
    onSearch(flag) {
      this.flag = true
      console.log(this.flag);
      // this.criteria = data;
      // // this.loadData();
      // console.log('a');
      this.getTitleValue()
    },
    onSearchh(flag) {
      this.flag = false
      console.log(this.flag);
      this.getTitleValue()
    },
    // 初始化获取列表数据
    loadData() {
      this.tableLoading = true;
      if (this.tabsName === "政策管理") {
        this.columns = this.columns1;
        this.criteria.categoryId = 1;
      } else {
        this.columns = this.columns2;
        this.criteria.categoryId = 2;
      }
      if (!this.columns.find(item => item.slot === "action")) {
        let buttonMenu = this.buttonMenu(this.$route.name);
        this.columns.push(this.columnMenu(buttonMenu.buttonRight, this, 190));
      }

      let data = {
        ...this.criteria,
      };
      this.APIS.policyList(data).then((res) => {
        this.tableLoading = false;
        if (res.code == 20000) {
          this.criteria.total = res.data.total;
          this.tableData = res.data.records;
        } else {
          this.$Message.error(res.message)
        }
      }).catch(err => {
        this.tableLoading = false;
      });
    },
    // 新建政策/帮助
    handleAdd(id) {
      console.log(this.newsType);
      this.titleValue = '新增新闻'
      this.$router.push({
        name: 'policyAdd',
        query: {
          // id: id,
          // tabsName: this.tabsName
          newsType: this.newsType
        }
      })
    },
    // 查看
    handleView(params) {
      this.$router.push({
        name: "policyDetail",
        query: {
          tabsName: this.tabsName,
          id: params.id
        }
      })
    },
    // 编辑
    handleEdit(params) {
      this.handleAdd(params.id);
    },
    // 删除
    handleDelete(params) {
      this.$refs.delt.instance(params);
    },
    modalConfirmTrue(data) {
      this.delLoading = true;
      // 删除总事件
      this.APIS.policyDel({id: data.id}).then((res) => {
        if (res.code == 20000) {
          this.delLoading = false;
          this.$refs.delt.showDelModal = false;
          this.$Message.success("删除成功");
          this.loadData();
        } else {
          this.delLoading = false;
          this.$Message.error(res.message)
        }
      });
    },
    selectionChange(data) {
      this.batchSelectionData = data;
    },
    //  批量删除
    batchDelete() {
      if (this.batchSelectionData.length > 0) {
        this.$refs.batchDelt.instance();
      } else {
        this.$Message.warning("请先勾选数据");
      }
    },
    batchModalConfirmTrue() {
      // 批量删除总事件
      let data = {
        idList: this.batchSelectionData.map(item => item.id)
      }
      this.delLoading = true;
      this.APIS.policyBatchDel(data).then((res) => {
        if (res.code == 20000) {
          this.delLoading = false;
          this.$refs.batchDelt.showDelModal = false;
          this.$Message.success("删除成功");
          this.batchSelectionData = [];
          this.loadData();
        } else {
          this.delLoading = false;
          this.$Message.error(res.message)
        }
      });
    },
  },
};
</script>


<style lang="less" scoped>
</style>
